
const LAYOUT_HORIZONTAL = "horizontal";
const LAYOUT_VERTICAL = "vertical";
import * as _ from "lodash";
export default {
  name: "multipane",
  props: {
    layout: {
      type: String,
      default: LAYOUT_VERTICAL,
    },
    affectOnNext: {
      type: Boolean,
      default: () => false,
    },
  },

  data() {
    return {
      isResizing: false,
    };
  },

  computed: {
    classnames() {
      return ["multipane", "layout-" + this.layout.slice(0, 1), this.isResizing ? "is-resizing" : ""];
    },
    cursor() {
      return this.isResizing ? (this.layout == LAYOUT_VERTICAL ? "col-resize" : "row-resize") : "";
    },
    userSelect() {
      return this.isResizing ? "none" : "";
    },
  },

  methods: {
    onMouseDown(customevent) {
      let { target: resizer, pageX: initialPageX, pageY: initialPageY } = customevent.detail.data;
      if (resizer.className && _.isString(resizer.className) && resizer.className.match("multipane-resizer")) {
        let self = this;
        let { $el: container, layout, affectOnNext } = self;

        let pane = affectOnNext ? resizer.nextElementSibling : resizer.previousElementSibling;
        let { offsetWidth: initialPaneWidth, offsetHeight: initialPaneHeight } = pane;

        let usePercentage = !!(pane.style.width + "").match("%");

        const { addEventListener, removeEventListener } = window;

        const resize = (initialSize, offset = 0) => {
          if (affectOnNext) offset = offset * -1;
          if (layout == LAYOUT_VERTICAL) {
            let containerWidth = container.clientWidth;
            let paneWidth = initialSize + offset;

            return (pane.style.width = usePercentage ? (paneWidth / containerWidth) * 100 + "%" : paneWidth + "px");
          }

          if (layout == LAYOUT_HORIZONTAL) {
            let containerHeight = container.clientHeight;
            let paneHeight = initialSize + offset;

            return (pane.style.height = usePercentage ? (paneHeight / containerHeight) * 100 + "%" : paneHeight + "px");
          }
        };

        // This adds is-resizing class to container
        self.isResizing = true;

        // Resize once to get current computed size
        let size = resize(layout == LAYOUT_VERTICAL ? initialPaneWidth : initialPaneHeight, 0);

        // Trigger paneResizeStart event
        self.$emit("paneResizeStart", pane, resizer, size);

        const onMouseMove = function({ pageX, pageY }) {
          size = layout == LAYOUT_VERTICAL ? resize(initialPaneWidth, pageX - initialPageX) : resize(initialPaneHeight, pageY - initialPageY);

          self.$emit("paneResize", pane, resizer, size);
        };

        const onMouseUp = function() {
          // Run resize one more time to set computed width/height.
          size = layout == LAYOUT_VERTICAL ? resize(pane.clientWidth) : resize(pane.clientHeight);

          // This removes is-resizing class to container
          self.isResizing = false;

          removeEventListener("mousemove", onMouseMove);
          removeEventListener("mouseup", onMouseUp);

          self.$emit("paneResizeStop", pane, resizer, size);
        };

        addEventListener("mousemove", onMouseMove);
        addEventListener("mouseup", onMouseUp);
      }
    },
  },
};
 